import React, { useEffect, useState } from 'react';
import { TreeSelect, Spin } from 'antd';
import { TreeSelectProps } from 'antd/es/tree-select';

export interface TreeSelectProProps extends TreeSelectProps<any> {
    ref: any;
}

const TreeSelectPro = (props: TreeSelectProProps) => {
    // 输入项过滤对应的 treeNode 属性默认为 title
    const [nodeFilterPropDefaultValue, setNodeFilterPropDefaultValue] = useState<string>('title');

    useEffect(() => {
        if (props?.treeNodeFilterProp) {
            setNodeFilterPropDefaultValue(props?.treeNodeFilterProp);
        }
    }, [props?.treeNodeFilterProp]);

    return (
        <Spin spinning={props?.loading || false}>
            <TreeSelect
                dropdownStyle={{ maxWidth: '100%', maxHeight: 450 }}
                {...props}
                treeNodeFilterProp={nodeFilterPropDefaultValue}
            />
        </Spin>
    );
};

export default React.forwardRef(TreeSelectPro);
